<template>
    <div style="backgroud-clor:#eee;">
        <el-card shadow="always" style="margin: 0px 20px;">
            <!-- //添加一级节点 -->
            <el-button circle size="mini" style="color:#409EFF;border:1px solid #409EFF;" @click="addOneSource"
                icon="el-icon-circle-plus-outline">
            </el-button>
            <el-tree :data="treeList" :props="props" node-key="_id" :default-expanded-keys="treeExtend">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span style="font-size:14px">{{ node.label }}</span>
                    <span style="margin-left: 15px;">
                        <!-- 添加子節點 -->
                        <svg @click="appendNode(data)" t="1655089006085" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5784" width="14" height="14   ">
                            <path
                                d="M940.809299 333.581448c-23.391756-57.684794-57.752332-109.431342-102.126982-153.805992-44.37465-44.37465-96.124268-78.736249-153.808038-102.128005C629.167536 55.056943 570.307987 43.603077 509.933945 43.603077c-60.375066 0-119.232568 11.453866-174.939311 34.044374-57.68377 23.391756-109.431342 57.753355-153.805992 102.128005-44.37465 44.37465-78.734202 96.122221-102.125959 153.805992C56.473199 389.288191 45.019333 448.145693 45.019333 508.519736c0 60.375066 11.453866 119.231545 34.044374 174.939311 23.391756 57.68377 57.751309 109.431342 102.125959 153.805992 44.37465 44.37465 96.122221 78.734202 153.805992 102.126982 55.706743 22.589484 114.565269 34.044374 174.939311 34.044374 60.374042 0 119.232568-11.453866 174.939311-34.044374 57.684794-23.391756 109.433388-57.752332 153.810085-102.126982 44.373627-44.373627 78.733179-96.122221 102.125959-153.805992 22.589484-55.706743 34.044374-114.564245 34.044374-174.939311C974.85265 448.145693 963.398784 389.288191 940.809299 333.581448zM905.988236 669.338445c-21.491477 52.999075-53.075823 100.559277-93.874017 141.357472-40.800241 40.799218-88.361467 72.383564-141.360542 93.875041-51.201126 20.761859-105.308441 31.289634-160.819732 31.289634-55.512315 0-109.61963-10.527774-160.818709-31.289634-52.999075-21.491477-100.558254-53.075823-141.357472-93.874017-40.799218-40.799218-72.382541-88.35942-93.875041-141.358495-20.762883-51.200102-31.289634-105.307418-31.289634-160.818709 0-55.511291 10.527774-109.618607 31.289634-160.818709 21.491477-52.999075 53.075823-100.558254 93.875041-141.357472 40.799218-40.800241 88.358397-72.384587 141.357472-93.877087 51.200102-20.762883 105.307418-31.290657 160.818709-31.290657 55.511291 0 109.618607 10.527774 160.819732 31.290657 52.999075 21.491477 100.5603 53.076846 141.359518 93.877087 40.799218 40.799218 72.383564 88.358397 93.875041 141.357472 20.761859 51.200102 31.289634 105.307418 31.289634 160.818709C937.278893 564.031027 926.750095 618.138342 905.988236 669.338445z"
                                p-id="5785" fill="#1296db"></path>
                            <path
                                d="M810.369481 489.052359c-0.014326 0-0.029676 0-0.042979 0l-281.56577 0.635473 0.590448-282.148032c0.021489-10.376325-8.372691-18.804275-18.747993-18.826787-0.014326 0-0.025583 0-0.039909 0-10.356882 0-18.764366 8.385994-18.785855 18.747993l-0.591471 282.311761-281.725406 0.636496c-10.376325 0.023536-18.767436 8.453533-18.744923 18.829857 0.023536 10.361999 8.429996 18.744923 18.785855 18.744923 0.014326 0 0.029676 0 0.042979 0l281.561677-0.635473-0.590448 282.152125c-0.021489 10.375302 8.372691 18.804275 18.747993 18.825764 0.014326 0 0.025583 0 0.039909 0 10.355859 0 18.764366-8.385994 18.785855-18.747993l0.590448-282.314831 281.728476-0.636496c10.376325-0.023536 18.768459-8.453533 18.744923-18.829857C829.131801 497.435283 820.726364 489.052359 810.369481 489.052359z"
                                p-id="5786" fill="#1296db"></path>
                        </svg>
                        <!-- 编辑 -->
                        <svg @click="editMenu(data)" style="margin-left: 15px;" t="1655132614097" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6740"
                            width="14" height="14">
                            <path
                                d="M247.0912 996.1472 100.5568 996.1472c-39.936 0-72.4992-32.5632-72.4992-72.4992L28.0576 81.92c0-39.936 32.5632-72.4992 72.4992-72.4992l766.0544 0c39.936 0 72.4992 32.5632 72.4992 72.4992l0 210.5344c0 12.3904-10.0352 22.528-22.528 22.528s-22.528-10.0352-22.528-22.528L894.0544 81.92c0-15.1552-12.288-27.5456-27.5456-27.5456L100.5568 54.3744c-15.1552 0-27.5456 12.288-27.5456 27.5456L73.0112 923.648c0 15.1552 12.288 27.5456 27.5456 27.5456l146.5344 0c12.3904 0 22.528 10.0352 22.528 22.528S259.4816 996.1472 247.0912 996.1472z"
                                p-id="6741" fill="#1296db"></path>
                            <path
                                d="M745.2672 192.1024 174.6944 192.1024c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l570.5728 0c12.3904 0 22.528 10.0352 22.528 22.528S757.6576 192.1024 745.2672 192.1024z"
                                p-id="6742" fill="#1296db"></path>
                            <path
                                d="M437.6576 429.6704 174.6944 429.6704c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l262.9632 0c12.3904 0 22.528 10.0352 22.528 22.528S450.1504 429.6704 437.6576 429.6704z"
                                p-id="6743" fill="#1296db"></path>
                            <path
                                d="M620.6464 310.8864 174.6944 310.8864c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l445.952 0c12.3904 0 22.528 10.0352 22.528 22.528S633.1392 310.8864 620.6464 310.8864z"
                                p-id="6744" fill="#1296db"></path>
                            <path
                                d="M399.6672 1009.8688c-6.2464 0-12.288-2.56-16.5888-7.2704-5.2224-5.7344-7.168-13.7216-5.12-21.2992l40.8576-146.6368c1.024-3.6864 3.072-7.168 5.7344-9.8304l408.9856-408.9856c14.1312-14.0288 36.9664-14.0288 51.0976 0l97.792 97.792c6.8608 6.8608 10.5472 15.872 10.5472 25.4976s-3.7888 18.7392-10.5472 25.4976L928.8704 618.496c-4.1984 4.1984-9.9328 6.5536-15.872 6.5536s-11.6736-2.3552-15.872-6.5536l-66.048-66.048c-8.8064-8.8064-8.8064-23.04 0-31.8464s23.04-8.8064 31.8464 0l50.176 50.176 31.4368-31.4368L859.136 454.0416 460.6976 852.48 431.104 958.6688 546.7136 936.96l231.7312-231.7312c5.0176-5.4272 50.7904-52.6336 107.2128-56.7296 12.3904-0.9216 23.1424 8.3968 24.064 20.7872 0.9216 12.3904-8.3968 23.1424-20.7872 24.064-40.3456 2.9696-77.4144 42.2912-77.824 42.7008-0.2048 0.2048-0.4096 0.512-0.7168 0.7168L573.5424 973.7216c-3.1744 3.1744-7.2704 5.3248-11.776 6.2464l-158.0032 29.5936C402.432 1009.7664 401.1008 1009.8688 399.6672 1009.8688z"
                                p-id="6745" fill="#1296db"></path>
                        </svg>
                        <!-- 删除 -->
                        <svg @click="removeNode(data)" style="margin-left: 15px;" t="1655132788786" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7759"
                            width="14" height="14">
                            <path
                                d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z"
                                p-id="7760" fill="#1296db"></path>
                            <path
                                d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z"
                                p-id="7761" fill="#1296db"></path>
                        </svg>
                    </span>
                    <!-- 移动 -->
                    <svg @click="moveNode(data)" v-if="data.show != null" style="margin-left: 15px;" t="1655132947105"
                        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        p-id="8766" width="14" height="14">
                        <path d="M895.8 592.1a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#333333"
                            p-id="8767"></path>
                        <path
                            d="M928 687.9c-17.8 0-32.2 14.4-32.2 32.1v80.7c0 35.3-28.7 64-64 64H192.5c-35.3 0-64-28.7-64-64V225c0-35.3 28.7-64 64-64H415l82.7 143.3c6.6 11.4 19.2 17.2 31.5 15.8h302.5c35.3 0 64 28.7 64 64v80c0 17.7 14.4 32.1 32.2 32.1s32.2-14.4 32.2-32.1c0-0.8 0-1.6-0.1-2.4v-77.5c0-70.7-57.3-128-128-128H543.9l-82.5-142.9c-7.4-12.9-18-16.2-27.3-16l-0.1-0.1H192.1c-70.7 0-128 57.3-128 128v574.1c0 70.7 57.3 128 128 128h640c70.7 0 128-57.3 128-128v-76.9c0.1-0.8 0.1-1.6 0.1-2.4 0-17.7-14.4-32.1-32.2-32.1z"
                            fill="#333333" p-id="8768"></path>
                        <path
                            d="M576.7 766.3c12.5 12.5 32.9 12.5 45.4 0L757.5 631c0.3-0.3 0.6-0.5 0.9-0.8h0.1l0.7-0.7c12.3-12.3 12.3-32.4 0-44.7l-136-136c-12.4-12.4-32.5-12.4-44.8-0.1l-0.7 0.7c-12.3 12.3-12.3 32.4 0 44.7l82 82h-372c-17.3 0-31.5 14.2-31.5 31.5s14.2 31.5 31.5 31.5h370.8l-81.7 81.8c-12.6 12.5-12.6 32.9-0.1 45.4z"
                            fill="#333333" p-id="8769"></path>
                    </svg>
                </span>
            </el-tree>
        </el-card>
        <!-- //添加对话框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item label="父对象" v-show="scene == 1 ? true : false">
                    <el-input placeholder="systemManage" v-model="input" :disabled="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="资源描述" prop="comments">
                    <el-input v-model="ruleForm.comments"></el-input>
                </el-form-item>
                <el-form-item label="资源类型" prop="sourceType">
                    <el-select @change="changInput" v-model="ruleForm.sourceType" value-key="" placeholder="" clearable
                        filterable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="icon" v-show="changeScene == 1 ? true : false">
                    <el-input v-model="ruleForm.icon"></el-input>
                </el-form-item>
                <el-form-item label="路由key" v-show="changeScene == 1 ? true : false">
                    <el-input v-model="ruleForm.routePath"></el-input>
                </el-form-item>
                <el-form-item label="资源地址" v-show="changeScene == 2 ? true : false">
                    <el-input placeholder="请输入内容" v-model="ruleForm.label">
                        <template slot="prepend">/manage/</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="显示在菜单项" v-show="switchOne == 1 ? true : false">
                    <el-switch v-model="switchValue"></el-switch>
                </el-form-item>
                <el-form-item label="排序" size="normal">
                    <el-input-number size="mini" v-model="num" @change="handleChange" :min="1" :max="50" label="描述文字">
                    </el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="edit == 1" type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button v-else type="primary" @click="submitForm('ruleForm')">更新</el-button>
                    <!-- <el-button v-else type="primary" @click="addSource">保存</el-button> -->
                    <el-button @click="clearDate">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- //对话框2 移動分組 -->
        <el-dialog title="父对象" :visible.sync="dialogVisible2" width="50%">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item label="父对象">
                    <el-select @change="changInput" v-model="value" value-key="" placeholder="" clearable filterable>
                        <el-option v-for="item in optionsMove" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addSourceTwo">更新</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { reqGetListTree } from '@/api/adminGroup'
import { reqaddOneResource, reqGetOneNode, reqUpdateOne, reqDeleteResource, reqUpdateParentId } from '@/api/adminResource'
import { renderTreeData } from '@/utils/auth'
export default {
    name: 'adminResource',
    data() {
        return {
            title: '',
            edit: '',
            //计数器
            num: '',
            dialogVisible2: false,
            switchValue: true,
            switchOne: 2,
            changeScene: 2,
            value: '',
            scene: '',
            input: "",
            dialogVisible: false,
            dialogVisibleEdit: false,
            treeExtend: [],
            show: null,
            treeList: [],
            props: {
                label: 'comments',
                children: 'children'
            },
            options: [
                {
                    value: '基础菜单',
                    lebal: 0
                },
                {
                    value: '操作和功能',
                    lebal: 1
                }
            ],
            optionsMove: [
                {
                    value: '系统管理',
                    lebal: '系统管理'
                },
                {
                    value: '文档管理',
                    lebal: '文档管理'
                },
                {
                    value: '会员管理',
                    lebal: '会员管理'
                },
                {
                    value: '邮件管理',
                    lebal: '邮件管理'
                },
                {
                    value: '扩展管理',
                    lebal: '扩展管理'
                },
            ],
            ruleForm: {
                api: "",
                comments: '',
                componentPath: "",
                enable: true,
                icon: '',
                label: "",
                parent: { id: "", label: "" },
                parentId: "0",
                routePath: '',
                sortId: 1,
                sourceType: '',
                type: '',
                date: '',
                isExt: '',
                __v: '',
                _id: ""
            },
            rules: {
                comments: [
                    { required: true, message: '请输入 备注', trigger: 'blur' },
                ],
                sourceType: [
                    { required: true, message: '请选择资源类型', trigger: 'change' }
                ],
            },
            count: 1,
            // defaultProps: {
            //     children: 'children',
            //     label: 'label'
            // },
        }
    },
    methods: {
        //计数器
        handleChange(value) {
            console.log(value);
        },
        //获取node节点数据
        async getListTree() {
            let result = await reqGetListTree()
            // console.log(result)
            this.treeList = renderTreeData(result.data.docs)
            console.log(this.treeList);
            //单独给二级节点添加文件夹移动
            this.treeList.forEach(item => {
                console.log(item)
                item.show = null
                item.children.forEach((item1) => {
                    console.log(item.children);
                    // if (item1.parentId = "BzVRSYXu")
                    item1.show = true
                })
            });
            //默认展开
            this.$nextTick(() => {
                result.data.docs.forEach((item) => {
                    console.log(result.data.docs);
                    if (item.parentId == 0 || item.parentId == "SkFHdYElb") {
                        item.isExt = true
                        this.treeExtend.push(item._id)
                        //  console.log(  result.data.docs);
                    }
                    item.children.forEach((item1) => {
                        if (item1.parentId == "SkFHdYElb") {
                            this.treeExtend.push(item1._id)
                        }
                    })
                    //  console.log(this.treeExtend);
                })
            })
        },
        //添加一级节点
        addOneSource() {
            this.dialogVisible = true
            this.scene = 2
            this.title = '填写资源信息'
            this.edit = 1
            this.ruleForm.comments = ''
            this.ruleForm.routePath = ''
            this.ruleForm.type = ''
            this.ruleForm.icon = ''
            this.ruleForm.sortId = ''
            this.switchValue = false
            this.ruleForm.sourceType = ''
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.edit == 1) {
                        if (this.ruleForm.sourceType == '基础菜单') {
                            this.ruleForm.type = '0'
                        } else {
                            this.ruleForm.type = '1'
                        }
                        const { api, comments, componentPath, enable, icon, label, parent, parentId, routePath, sortId, type } = this.ruleForm
                        let result = await reqaddOneResource({ api, comments, componentPath, enable, icon, label, parent, parentId, routePath, sortId, type })
                        if (result.status == 200) {
                            this.$message({ type: 'success', message: '添加成功' })
                            this.dialogVisible = false
                            //获取node节点数据
                            this.getListTree()
                        }
                    } else {
                        const { api, comments, date, componentPath, enable, icon, label, parent, parentId, routePath, sortId, isExt, type, __v, _id } = this.ruleForm
                        let result = await reqUpdateOne({ api, comments, date, componentPath, enable, icon, label, parent, parentId, routePath, sortId, isExt, type, __v, _id })
                        if (result.status == 200) {
                            this.$message({ type: 'success', message: '更新成功' })
                            this.dialogVisible = false
                        }
                        this.ruleForm.comments = ''
                        this.ruleForm.routePath = ''
                        this.ruleForm.type = ''
                        this.ruleForm.icon = ''
                        this.switchValue = false
                        this.ruleForm.sourceType = ''
                        //获取node节点数据
                        this.getListTree()
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        //添加子节点
        appendNode(data) {
            this.ruleForm.comments = ''
            this.ruleForm.routePath = ''
            this.ruleForm.type = ''
            this.ruleForm.icon = ''
            this.ruleForm.sortId = ''
            this.switchValue = false
            this.ruleForm.sourceType = ''
            this.dialogVisible = true
            this.scene = 1
            this.edit = 1
            // console.log(data)
            delete this.ruleForm.parent.id
            this.ruleForm.parent.label = data.label
            this.ruleForm.parentId = data._id

        },
        //移除节点
        async removeNode(data) {
            this.$confirm('您确认要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                reqDeleteResource({ ids: data._id }).then((res) => {
                    //获取node节点数据
                    this.getListTree()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //请求用户组数据
                    this.getAdminGroup()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //移动分组
        async moveNode(data) {
            this.dialogVisible2 = true
            this.value='系统管理'
            let result = await reqGetOneNode({ id: data._id })
            this.ruleForm={ ...result.data}      
        },
        //提交分组
        async addSourceTwo() {
            this.dialogVisible2 = false
            let result = await reqUpdateParentId({...this.ruleForm})
            if (result.status == 200) {
                this.$message({ type: 'success', message: '更新成功' })
            }
            //获取node节点数据
            this.getListTree()
        },
        //变换input框
        changInput(val) {
            // console.log(val)
            if (val == '基础菜单') {
                this.changeScene = 1
                this.scene == 1
            } else {
                this.changeScene = 2
            }
        },
        //编辑菜单
        async editMenu(data) {
            console.log(data);
            this.title = '修改资源信息'
            this.edit = 2
            this.dialogVisible = true
            this.changeScene = 1
            this.switchOne = 1
            this.ruleForm.parentId = data._id
            const { parentId } = this.ruleForm
            let reuslt = await reqGetOneNode({ id: parentId })
            this.ruleForm = { ...reuslt.data }
            if (reuslt.data.type == 0) {
                this.ruleForm.sourceType = '基础菜单'
            } else {
                this.ruleForm.sourceType = '操作和功能'
            }
            if (reuslt.data.type == 1) {
                this.changeScene = 2
                switchOne == 2
            } else {
                this.changeScene = 1
            }

        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        clearDate() {
            this.ruleForm.comments = ''
            this.ruleForm.componentPath = ''
            this.ruleForm.enable = ''
            this.ruleForm.icon = ''
            this.ruleForm.label = ''
            this.ruleForm.routePath = ''
            this.ruleForm.parentId = ''
            this.ruleForm.parent = ''
            this.ruleForm.sortId = ''
            // this.ruleForm.type = ''
            this.ruleForm.date = ''
            this.ruleForm.isExt = ''
            this.ruleForm.__v = ''
            this.ruleForm._id = ''
            //获取node节点数据
            this.getListTree()
        }
    },
    mounted() {
        //获取属性图资源数据
        this.getListTree()
    },
}
</script>

<style>
.custom-tree-node {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-right: 15px;
}
</style>